<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >
<html lang="en">
<head>
    <title>CSS3 Chrome Tabs</title>
    
    <!--Tabs Style Sheet Foundation and Theme-->
    
    <link href="tabs.css" type="text/css" rel="stylesheet">
        
        
    <style type="text/css">
    
    /* Basic and Extras */
    
        body{
            background-color: #BADA55;
            background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
            background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
            
        }
    
        #container{
            background-color: #9c9c9c;
            padding: 1px;
            max-width: 960px;
            margin: 5px auto;
            border-radius: 4px;
            box-shadow: 0 2px 3px #444;
        }
        
        .wrap{
            
            padding: 0;
            margin: 0;
            -o-border-radius: 2px;
            border-radius: 2px;
            overflow: hidden;
        }
        
        .window{
            height: 100%;
            width: 100%;
            border: 0;
            background-color: #fff;
        }
        
        
        
        .search{
            border-radius: 4px;
            border: 1px solid #9c9c9c;
            line-height: 25px;
            height: 25px;
            background-color: #fff;
            margin: 5px;
            box-shadow: inset 0 1px 1px #ccc, 0 1px 1px #fff;
            width: 500px;
            padding-left: 25px;
            background-image: url(default.png);
            background-repeat: no-repeat;
            background-position: 5px 5px;
        }
        
        .home{
            width: 25px;
            height: 25px;
            background-image: url(home.png);
            background-repeat: no-repeat;
            background-position: center;
            float: left;
            margin: 5px;
            border-radius: 4px;
            border: 1px solid transparent;
        }
        
        .home:hover{
            background-color: rgba(255,255,255,.3);
            border-color: #9c9c9c;
        }
        
        .test{
            margin:  30px;
            border-top-right-radius: 20px 60px;
            border-top-left-radius: 20px 60px;
            background-color: #bada55;
            height: 60px;
            width: 100px;
        }
        
        /* Clear Fix took for HTML 5 Boilerlate*/
        
        .clearfix:before, .clearfix:after { content: ""; display: table; }
        .clearfix:after { clear: both; }
        .clearfix { zoom: 1; }
    
    
    </style>
    
</head>
<body>
    <div id="container">
            <div class="wrap">
                    <ul class="tab-list">
                        <li class="current">
                            <a href="ads.html">Advertisments</a>
                        </li>
                        <li rel="redeye16.png" >
                            <a href="http://www.redeyeoperations.com/?p=1055">Back to Post</a>
                        </li>
                        <li rel="zoomy16.png">
                            <a href="http://redeyeoperations.com/plugins/zoomy">Zoomy Plugin</a>
                        </li>
                        <li rel="chrome16.png">
                            <a href="http://www.google.com/chrome">Google Chrome</a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <div class="bar">
                        <div class="home"></div>
                        <input type="text"class="search">
                        
                    </div>
                    <iframe class="window" src="ads.html">
                    </iframe>
            </div>
    </div>
    
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    
    <script>
        (function ($) {
            
            
            
            $('.tab-list')
                    .find('li')
                    .each(function () {
                        
                            var favico = $(this).attr('rel') ? $(this).attr('rel') : 'default.png';
                
                            // Assests for tab look
                
                            var template = '<div class="left-mask">\
                                                <span></span>\
                                            </div>\
                                            <div class="right-mask">\
                                                <span></span>\
                                            </div>';
                            
                            $(this)
                                .append(template)
                                .find('a')
                                .css('background-image', 'url(' + favico + ')');
                                
                            
                
                
                    })
                    .click(function (e) {
                        
                            // Toggle Current Class
                            var ele = $(this),
                                    link = ele.find('a').attr('href');
                    
                            ele
                                    .addClass('current')
                                    .siblings('li')
                                    .removeClass('current');
                                    
                                    console.log(link);
                                    
                            $('.window').attr('src', link);
                            $('.search').val(link);
                                    
                            e.preventDefault();
                        
                    })
            
            $('.window').height(window.innerHeight - 100);
            
            $('.search').keypress(function(e){
                
                if(e.keyCode === 13){
                    
                    if($(this).val().split(' ').lenght > 0){
                    
                        var link = 'http://google.com/?q=' + $(this).val();
                    
                    }else{
                        var link =  $(this).val();
                    }
                    
                    $('.window').attr('src', link);
                    
                }
                
            })
            
            $('.home').click(function () {
                
                window.location = 'http://www.redeyeoperations.com/?p=1055';    
                
            })
            
            
        } (jQuery))
    </script>
    
    
</body>
</html>
